<template>
  <AdminLayout active-menu="agent-verification">
    <div class="agent-verification-content">
      <div class="content-header">
        <h2>中介资质审核</h2>
        <p>审核和管理中介申请</p>
      </div>

      <!-- 搜索和筛选区域 -->
      <div class="search-filter-section">
        <el-card class="filter-card">
          <div class="search-section">
            <el-input
              v-model="searchKeyword"
              placeholder="搜索申请人姓名、身份证号、公司名称、电话、邮箱..."
              clearable
              style="width: 400px; margin-right: 15px;"
              @input="handleSearch"
            >
              <template #suffix>
                <el-icon><Search /></el-icon>
              </template>
            </el-input>
            <el-button type="primary" @click="handleSearch">搜索</el-button>
          </div>

          <el-form :inline="true" :model="filterForm" class="filter-form">
            <el-form-item label="审核状态">
              <el-select v-model="filterForm.status" placeholder="选择状态"  clearable @change="handleFilter">
                <el-option label="全部" value=""></el-option>
                <el-option label="待审核" value="pending"></el-option>
                <el-option label="已通过" value="approved"></el-option>
                <el-option label="已拒绝" value="rejected"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="提交时间">
              <el-date-picker
                v-model="filterForm.dateRange"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="handleFilter"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleFilter">筛选</el-button>
              <el-button @click="resetFilters">重置</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </div>

      <!-- 中介申请列表 -->
      <div class="agent-list-section">
        <el-card class="list-card">
          <template #header>
            <div class="card-header">
              <span>中介申请列表 ({{ filteredApplications.length }})</span>
              <div class="header-actions">
                <el-button type="success" @click="batchApprove" :disabled="selectedApplications.length === 0">
                  批量通过 ({{ selectedApplications.length }})
                </el-button>
                <el-button type="danger" @click="batchReject" :disabled="selectedApplications.length === 0">
                  批量拒绝 ({{ selectedApplications.length }})
                </el-button>
              </div>
            </div>
          </template>

          <el-table
            :data="paginatedApplications"
            @selection-change="handleSelectionChange"
            style="width: 100%"
            class="agent-table"
            stripe
            v-loading="loading"
            element-loading-text="加载中..."
          >
            <el-table-column type="selection" width="55" />
            <el-table-column prop="id" label="申请ID" width="100" />
            <el-table-column prop="companyName" label="公司名称" width="200" />
            <el-table-column prop="realName" label="申请人" width="120" />
            <el-table-column prop="licenseNo" label="营业执照号" width="200" />
            <el-table-column prop="phone" label="联系电话" width="150" />
            <el-table-column label="营业执照图片" width="120">
              <template #default="scope">
                <el-button size="small" type="primary" @click="viewLicense(scope.row)">查看图片</el-button>
              </template>
            </el-table-column>
            <el-table-column prop="submitTime" label="提交时间" width="180" />
            <el-table-column prop="status" label="状态" width="120">
              <template #default="scope">
                <el-tag
                    :type="scope.row.status === 'pending' ? 'warning' :
                         scope.row.status === 'approved' ? 'success' : 'danger'">
                  {{ getStatusText(scope.row.status) }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="250" fixed="right">
              <template #default="scope">
                <el-button size="small" type="primary" @click="viewApplication(scope.row)">查看详情</el-button>
                <el-button
                    v-if="scope.row.status === 'pending'"
                    size="small"
                    type="success"
                    @click="approveApplication(scope.row)"
                >
                  通过
                </el-button>
                <el-button
                    v-if="scope.row.status === 'pending'"
                    size="small"
                    type="danger"
                    @click="rejectApplication(scope.row)"
                >
                  拒绝
                </el-button>
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页 -->
          <div class="pagination-wrapper">
            <el-pagination
              v-model:current-page="currentPage"
              v-model:page-size="pageSize"
              :page-sizes="[10, 20, 50, 100]"
              :total="filteredApplications.length"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </el-card>
      </div>

      <!-- 详情对话框 -->
      <el-dialog v-model="dialogVisible" title="中介申请详情" width="900px">
        <div v-if="currentApplication" class="application-details">
          <el-row :gutter="20">
            <el-col :span="14">
              <el-descriptions title="申请人信息" :column="2" border>
                <el-descriptions-item label="申请ID">{{ currentApplication.id }}</el-descriptions-item>
                <el-descriptions-item label="申请人姓名">{{ currentApplication.realName }}</el-descriptions-item>
                <el-descriptions-item label="身份证号">{{ currentApplication.idCard }}</el-descriptions-item>
                <el-descriptions-item label="联系电话">{{ currentApplication.phone }}</el-descriptions-item>
                <el-descriptions-item label="邮箱地址">{{ currentApplication.email }}</el-descriptions-item>
                <el-descriptions-item label="所在城市">{{ currentApplication.city }}</el-descriptions-item>
                <el-descriptions-item label="工作年限">{{ currentApplication.workYears }}年</el-descriptions-item>
                <el-descriptions-item label="提交时间">{{ currentApplication.submitTime }}</el-descriptions-item>
              </el-descriptions>

              <el-descriptions title="公司信息" :column="1" border style="margin-top: 20px;">
                <el-descriptions-item label="公司名称">{{ currentApplication.companyName }}</el-descriptions-item>
                <el-descriptions-item label="公司地址">{{ currentApplication.address }}</el-descriptions-item>
              </el-descriptions>

              <el-descriptions title="审核状态" :column="1" border style="margin-top: 20px;">
                <el-descriptions-item label="审核状态">
                  <el-tag :type="currentApplication.status === 'pending' ? 'warning' :
                               currentApplication.status === 'approved' ? 'success' : 'danger'">
                    {{ getStatusText(currentApplication.status) }}
                  </el-tag>
                </el-descriptions-item>
              </el-descriptions>

              <div v-if="currentApplication.rejectReason" class="reject-reason" style="margin-top: 20px;">
                <el-alert
                  title="拒绝原因"
                  type="error"
                  :description="currentApplication.rejectReason"
                  show-icon
                  :closable="false"
                />
              </div>
            </el-col>
            <el-col :span="10">
              <div class="license-info">
                <h4>营业执照编号</h4>
                <div class="license-number">{{ currentApplication.licenseNo }}</div>
              </div>
              <div class="license-images">
                <h4>营业执照图片</h4>
                <div class="license-grid">
                  <el-image
                    v-for="(img, index) in currentApplication.licenseImages"
                    :key="index"
                    :src="img"
                    :alt="`营业执照图片${index + 1}`"
                    class="license-image"
                    fit="cover"
                    :preview-src-list="currentApplication.licenseImages"
                    :initial-index="index"
                  />
                </div>
                <div class="image-tips">
                  <p><el-icon><InfoFilled /></el-icon> 点击图片可放大查看</p>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
        <template #footer>
          <el-button @click="dialogVisible = false">关闭</el-button>
          <el-button 
            v-if="currentApplication && currentApplication.status === 'pending'"
            type="success"
            @click="approveApplication(currentApplication)"
          >
            通过申请
          </el-button>
          <el-button
            v-if="currentApplication && currentApplication.status === 'pending'"
            type="danger"
            @click="showRejectDialog = true"
          >
            拒绝申请
          </el-button>
        </template>
      </el-dialog>

      <!-- 拒绝申请对话框 -->
      <el-dialog v-model="showRejectDialog" title="拒绝申请" width="500px">
        <el-form :model="rejectForm" label-width="80px">
          <el-form-item label="拒绝原因" required>
            <el-input
              v-model="rejectForm.reason"
              type="textarea"
              :rows="4"
              placeholder="请输入拒绝原因"
            />
          </el-form-item>
        </el-form>
        <template #footer>
          <el-button @click="showRejectDialog = false">取消</el-button>
          <el-button type="danger" @click="confirmReject">确认拒绝</el-button>
        </template>
      </el-dialog>
    </div>
  </AdminLayout>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import AdminLayout from '@/components/layout/AdminLayout.vue'
import api from '@/utils/api'
import { Search, InfoFilled } from '@element-plus/icons-vue'

// 搜索关键词
const searchKeyword = ref('')

// 筛选表单
const filterForm = reactive({
  status: '',
  dateRange: []
})

// 分页
const currentPage = ref(1)
const pageSize = ref(10)

// 对话框控制
const dialogVisible = ref(false)
const showRejectDialog = ref(false)
const currentApplication = ref(null)

// 选中的申请
const selectedApplications = ref([])

// 拒绝表单
const rejectForm = reactive({
  reason: ''
})

// 中介申请数据
const applications = ref([])
const loading = ref(false)

// 获取中介申请列表
const fetchApplications = async () => {
  loading.value = true
  try {
    console.log('🔍 开始获取中介申请列表...')
    const response = await api.get('/admin/agent/list')
    console.log('🔍 API响应:', response.data)

    if (response.data.code === "200" || response.data.code === 200) {
      console.log('✅ 获取申请列表成功，数据条数:', response.data.data?.length || 0)
      // 转换数据格式以匹配前端显示
      applications.value = response.data.data.map(app => ({
        id: app.agentVerifyId,
        userId: app.userId,
        realName: app.realName,
        idCard: app.idCard,
        phone: app.phone,
        email: app.email,
        city: app.city,
        workYears: app.workYears,
        companyName: app.companyName,
        licenseNo: app.licenseNo,
        address: app.companyPosition,
        submitTime: app.applyTime,
        status: getStatusFromCode(app.verifyStatus),
        rejectReason: app.refuseReason,
        licenseImages: app.licensePicPath ? [app.licensePicPath] : []
      }))
      console.log('✅ 数据转换完成，应用列表:', applications.value)
    } else {
      console.error('❌ 获取申请列表失败:', response.data.message)
      ElMessage.error('获取申请列表失败：' + response.data.message)
    }
  } catch (error) {
    console.error('❌ 获取申请列表异常:', error)
    ElMessage.error('获取申请列表失败，请稍后重试')
  } finally {
    loading.value = false
  }
}

// 状态码转换为状态文本
const getStatusFromCode = (code) => {
  switch (code) {
    case 0: return 'rejected'
    case 1: return 'pending'
    case 2: return 'approved'
    default: return 'pending'
  }
}

// 状态文本转换为状态码（备用）
// const getCodeFromStatus = (status) => {
//   switch (status) {
//     case 'rejected': return 0
//     case 'pending': return 1
//     case 'approved': return 2
//     default: return 1
//   }
// }

// 初始化时获取数据
onMounted(() => {
  fetchApplications()
})

// 模拟数据已移除，现在使用真实API数据

// 筛选后的申请
const filteredApplications = computed(() => {
  let result = applications.value

  // 搜索过滤
  if (searchKeyword.value.trim()) {
    const keyword = searchKeyword.value.toLowerCase()
    result = result.filter(app =>
      app.companyName.toLowerCase().includes(keyword) ||
      app.realName.toLowerCase().includes(keyword) ||
      app.phone.includes(keyword) ||
      app.licenseNo.toLowerCase().includes(keyword) ||
      app.email.toLowerCase().includes(keyword) ||
      app.idCard.includes(keyword)
    )
  }

  // 状态过滤
  if (filterForm.status) {
    result = result.filter(app => app.status === filterForm.status)
  }

  // 时间范围过滤
  if (filterForm.dateRange && filterForm.dateRange.length === 2) {
    const [startDate, endDate] = filterForm.dateRange
    result = result.filter(app => {
      const submitDate = new Date(app.submitTime)
      const start = new Date(startDate)
      const end = new Date(endDate)
      end.setHours(23, 59, 59, 999) // 设置为当天的最后一刻
      return submitDate >= start && submitDate <= end
    })
  }

  // 按提交时间倒序排列
  result.sort((a, b) => new Date(b.submitTime) - new Date(a.submitTime))

  return result
})

// 分页后的申请
const paginatedApplications = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return filteredApplications.value.slice(start, end)
})

// 搜索处理
const handleSearch = () => {
  currentPage.value = 1
}

// 筛选处理
const handleFilter = () => {
  currentPage.value = 1
}

// 重置筛选
const resetFilters = () => {
  Object.assign(filterForm, {
    status: '',
    dateRange: []
  })
  searchKeyword.value = ''
  handleFilter()
}

// 处理选择变化
const handleSelectionChange = (selection) => {
  selectedApplications.value = selection
}

// 分页处理
const handleSizeChange = (val) => {
  pageSize.value = val
  currentPage.value = 1
}

const handleCurrentChange = (val) => {
  currentPage.value = val
}

// 获取状态文本
const getStatusText = (status) => {
  const texts = {
    pending: '待审核',
    approved: '已通过',
    rejected: '已拒绝'
  }
  return texts[status] || status
}

// 查看申请详情
const viewApplication = (application) => {
  currentApplication.value = application
  dialogVisible.value = true
}

// 查看营业执照
const viewLicense = (application) => {
  currentApplication.value = application
  dialogVisible.value = true
}
// 通过申请


// 通过申请
const approveApplication = async (application) => {
  try {
    await ElMessageBox.confirm(`确定通过 ${application.companyName} 的申请吗？`, '确认操作', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })

    loading.value = true
    const response = await api.get(`/admin/agent/agree/${application.userId}`)

    if (response.data.code === "200" || response.data.code === 200) {
      application.status = 'approved'
      ElMessage.success('申请已通过')
      dialogVisible.value = false
      // 刷新列表
      await fetchApplications()
    } else {
      ElMessage.error('审核失败：' + response.data.message)
    }
  } catch (error) {
    if (error !== 'cancel') { // 不是用户取消操作
      console.error('审核通过失败:', error)
      ElMessage.error('审核操作失败，请稍后重试')
    }
  } finally {
    loading.value = false
  }
}

// 拒绝申请
const rejectApplication = (application) => {
  currentApplication.value = application
  showRejectDialog.value = true
}

// 确认拒绝
const confirmReject = async () => {
  if (!rejectForm.reason.trim()) {
    ElMessage.warning('请输入拒绝原因')
    return
  }

  try {
    loading.value = true
    const response = await api.post('/admin/agent/refuse', {
      userId: currentApplication.value.userId,
      refuseReason: rejectForm.reason
    })

    if (response.data.code === "200" || response.data.code === 200) {
      currentApplication.value.status = 'rejected'
      currentApplication.value.rejectReason = rejectForm.reason

      ElMessage.success('申请已拒绝')
      showRejectDialog.value = false
      dialogVisible.value = false
      rejectForm.reason = ''

      // 刷新列表
      await fetchApplications()
    } else {
      ElMessage.error('审核失败：' + response.data.message)
    }
  } catch (error) {
    console.error('审核拒绝失败:', error)
    ElMessage.error('审核操作失败，请稍后重试')
  } finally {
    loading.value = false
  }
}

// 批量通过
const batchApprove = async () => {
  const pendingApplications = selectedApplications.value.filter(app => app.status === 'pending')
  if (pendingApplications.length === 0) {
    ElMessage.warning('没有可通过的申请')
    return
  }

  try {
    await ElMessageBox.confirm(`确定批量通过选中的 ${pendingApplications.length} 个申请吗？`, '确认操作', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })

    loading.value = true
    const userIds = pendingApplications.map(app => app.userId)

    // 批量调用审核通过接口
    const promises = userIds.map(userId =>
      api.get(`/admin/agent/agree/${userId}`)
    )

    const results = await Promise.allSettled(promises)
    const successCount = results.filter(result => result.status === 'fulfilled' && (result.value.data.code === "200" || result.value.data.code === 200)).length
    const failCount = results.length - successCount

    if (successCount > 0) {
      ElMessage.success(`成功通过 ${successCount} 个申请${failCount > 0 ? `，${failCount} 个失败` : ''}`)
    } else {
      ElMessage.error('批量审核失败')
    }

    selectedApplications.value = []
    // 刷新列表
    await fetchApplications()
  } catch (error) {
    if (error !== 'cancel') {
      console.error('批量审核通过失败:', error)
      ElMessage.error('批量审核操作失败，请稍后重试')
    }
  } finally {
    loading.value = false
  }
}

// 批量拒绝
const batchReject = async () => {
  const pendingApplications = selectedApplications.value.filter(app => app.status === 'pending')
  if (pendingApplications.length === 0) {
    ElMessage.warning('没有可拒绝的申请')
    return
  }

  try {
    const reason = await ElMessageBox.prompt('请输入拒绝原因', '批量拒绝', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      inputPattern: /.+/,
      inputErrorMessage: '拒绝原因不能为空'
    })

    loading.value = true
    const userIds = pendingApplications.map(app => app.userId)

    // 批量调用审核拒绝接口
    const promises = userIds.map(userId =>
      api.post('/admin/agent/refuse', {
        userId: userId,
        refuseReason: reason.value
      })
    )

    const results = await Promise.allSettled(promises)
    const successCount = results.filter(result => result.status === 'fulfilled' && (result.value.data.code === "200" || result.value.data.code === 200)).length
    const failCount = results.length - successCount

    if (successCount > 0) {
      ElMessage.success(`成功拒绝 ${successCount} 个申请${failCount > 0 ? `，${failCount} 个失败` : ''}`)
    } else {
      ElMessage.error('批量审核失败')
    }

    selectedApplications.value = []
    // 刷新列表
    await fetchApplications()
  } catch (error) {
    if (error !== 'cancel') {
      console.error('批量审核拒绝失败:', error)
      ElMessage.error('批量审核操作失败，请稍后重试')
    }
  } finally {
    loading.value = false
  }
}


</script>

<style scoped>
.agent-verification-content {
  height: 100%;
  overflow-y: auto;
  padding: 20px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 10px;
  margin: 10px;
  box-shadow: 0 4px 20px rgba(0, 195, 255, 0.1);
}

.agent-verification-content::-webkit-scrollbar {
  width: 8px;
}

.agent-verification-content::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

.agent-verification-content::-webkit-scrollbar-thumb {
  background: rgba(0, 195, 255, 0.6);
  border-radius: 4px;
}

.agent-verification-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 195, 255, 0.8);
}

.content-header {
  text-align: center;
  margin-bottom: 30px;
}

.content-header h2 {
  color: #2c3e50;
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 10px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.content-header p {
  color: #7f8c8d;
  font-size: 16px;
  margin: 0;
}

/* 搜索筛选区域 */
.search-filter-section {
  margin-bottom: 20px;
}

.filter-card {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(0, 195, 255, 0.3);
  box-shadow: 0 4px 12px rgba(0, 195, 255, 0.1);
}

.search-section {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.filter-form {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  align-items: end;
}

/* 修复选择框文字显示问题 */
.filter-form .el-select {
  min-width: 120px;
}

.filter-form .el-select .el-input__inner {
  color: #606266 !important;
  background-color: #ffffff !important;
}

.filter-form .el-select .el-input__inner::placeholder {
  color: #c0c4cc !important;
}

/* 确保选择框选中状态的文字可见 */
:deep(.el-select .el-input.is-focus .el-input__inner) {
  color: #606266 !important;
  background-color: #ffffff !important;
}

:deep(.el-select .el-input__inner) {
  color: #606266 !important;
  background-color: #ffffff !important;
}

/* 下拉选项样式 */
:deep(.el-select-dropdown .el-option) {
  color: #606266 !important;
  background-color: #ffffff !important;
}

:deep(.el-select-dropdown .el-option:hover) {
  background-color: #f5f7fa !important;
  color: #409eff !important;
}

:deep(.el-select-dropdown .el-option.selected) {
  background-color: #409eff !important;
  color: #ffffff !important;
}

/* 列表区域 */
.agent-list-section {
  margin-bottom: 20px;
}

.list-card {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(0, 195, 255, 0.3);
  box-shadow: 0 4px 12px rgba(0, 195, 255, 0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  color: #2c3e50;
}

.header-actions {
  display: flex;
  gap: 10px;
}

/* 表格样式 */
.agent-table {
  background: transparent;
}

.agent-table :deep(.el-table__header th) {
  background: rgba(0, 195, 255, 0.15) !important;
  color: #2c3e50 !important;
  font-weight: 600;
  border-bottom: 2px solid rgba(0, 195, 255, 0.3);
}

.agent-table :deep(.el-table__row) {
  background: rgba(255, 255, 255, 0.9) !important;
}

.agent-table :deep(.el-table__row:hover) {
  background: rgba(0, 195, 255, 0.1) !important;
}

.agent-table :deep(.el-table__row--striped) {
  background: rgba(248, 249, 250, 0.9) !important;
}

.agent-table :deep(.el-table__row--striped:hover) {
  background: rgba(0, 195, 255, 0.1) !important;
}

.pagination-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

/* 详情样式 */
.application-details {
  margin: 20px 0;
}

.license-images h4 {
  color: #2c3e50;
  margin-bottom: 15px;
  font-size: 16px;
  font-weight: 600;
}

.license-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 15px;
}

.license-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
  border: 2px solid rgba(0, 195, 255, 0.3);
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.license-image:hover {
  border-color: rgba(0, 195, 255, 0.6);
  transform: scale(1.02);
  box-shadow: 0 6px 20px rgba(0, 195, 255, 0.2);
}

.image-tips {
  margin-top: 10px;
  text-align: center;
}

.image-tips p {
  color: #909399;
  font-size: 12px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.application-details .el-descriptions {
  margin-bottom: 0;
}

.application-details .el-descriptions__title {
  font-size: 16px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 15px;
}

.reject-reason {
  margin-top: 20px;
}

.license-info {
  margin-bottom: 20px;
}

.license-info h4 {
  color: #2c3e50;
  margin: 0 0 10px 0;
  font-size: 16px;
  font-weight: 600;
}

.license-number {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 6px;
  padding: 12px 15px;
  font-family: 'Courier New', monospace;
  font-size: 14px;
  font-weight: 600;
  color: #495057;
  letter-spacing: 1px;
  word-break: break-all;
}

/* 响应式设计 */
@media (max-width: 992px) {
  .search-section {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .filter-form {
    flex-direction: column;
  }

  .filter-form .el-form-item {
    width: 100%;
  }

  .card-header {
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
  }

  .header-actions {
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .agent-verification-content {
    padding: 15px;
    margin: 5px;
  }

  .content-header h2 {
    font-size: 24px;
  }
}
</style>
